<template>
	<view class="formback">
		<view class="settlement-2 background-f margin-b">
			<view class="settlement-2-img">基本信息</view>
			<uni-forms :modelValue="formData" label-position="top" label-width="auto" :rules="rules">
				<uni-forms-item label="申请人姓名" name="applyUserName" required
					style="border-bottom: 1rpx solid #ccc; margin-top: 30rpx;">
					<view class="form-item-content">
						<label class="form-item-label">姓名</label>
						<input type="text" class="form-item-input" disabled="true" v-model="formData.applyUserName"
							placeholder="请输入姓名" />
					</view>
				</uni-forms-item>
				
				<uni-forms-item label="联系电话" name="applyPhone" required
					style=" border-bottom: 1rpx solid #ccc;">
					<view class="form-item-content">
						<label class="form-item-label">联系电话</label>
						<input type="text" class="form-item-input" disabled="true" v-model="formData.applyPhone"
							placeholder="请输入电话号码" />
					</view>
				</uni-forms-item>
				
				<uni-forms-item label="身份证号码" name="applyIdCard" required
					 >
					<view class="form-item-content">
						<label class="form-item-label">身份证号码</label>
						<input type="text" class="form-item-input" disabled="true" v-model="maskedIdCard"
							placeholder="请输入身份证号码" />
					</view>
				</uni-forms-item>
				
			</uni-forms>
		</view>
		<view class="settlement-2 background-f margin-b"  >
			<!-- <uni-forms :modelValue="formData" label-position="top" label-width="auto" :rules="rules"> -->
				<uni-forms-item label="申请成为组织员的工会：" name="applyTradeUnionName" required
					style=" ">
					<view class="form-item-contents" >
						<div class="form-item-labels">申请成为组织员的工会:</div>
						<input type="text" class="form-item-inputs" v-model="formData.applyTradeUnionName"
							placeholder="中电万维信息技术有限公司工会委员会" />
					</view>
				</uni-forms-item>
			<!-- </uni-forms> -->
		</view>

		<view class="btn1 flex button-bottom">
			<button class="button flex1" :loading="buttonLoading" @click="handleClick">
				提交申请
			</button>
		</view>
	</view>
</template>

<script>
	import {
		setApplyForOrganizer
	} from '../../api/work/applyfororganizer';
import { toast } from '../../utils/common';
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'

	export default {
		onLoad(option) {
			this.formData = {
				...this.formData,
				...JSON.parse(option.userObj),
			}


		},
		computed: {
			maskedIdCard() {
				const idCard = this.formData.applyIdCard;
				// 假设掩码规则是只显示前6位和后4位
				return idCard ?
					idCard.replace(/^(\d{6})\d+(\d{4})$/, '$1********$2') :
					'';
			}
		},
		onShow() {
			// this.userTopAuth(false).then(res => {
			// 	console.log(res);
			// 	this.formData = {}; // 初始化表单数据
			// });
		},
		data() {
			return {
				buttonLoading: false,
				formData: {
					applyUserName: '',
					applyPhone: '',
					applyIdCard: '',
					applyTradeUnionName: ''
				},
				rules: {
					applyUserName: {
						required: true,
						message: '请输入姓名'
					},
					applyPhone: {
						required: true,
						message: '请输入联系电话',
						pattern: /^[0-9]{11}$/,
						patternMessage: '联系电话格式不正确'
					},
					applyIdCard: {
						required: true,
						message: '请输入身份证号码',
						pattern: /^(\\d{15}|\\d{18}|\\d{17}(\\d|X|x))$/,
						patternMessage: '身份证号码格式不正确'
					},
					applyTradeUnionName: {
						required: true,
						message: '请输入工会名称'
					}
				}
			};
		},
		components: {
			cityPicker
		},
		methods: {
			
			handleClick() {
				if (!this.buttonLoading) {
					this.submitForm();
				}
			},
			
			submitForm() {
				console.log('提交的数据：', this.formData);
				this.buttonLoading = true
				setApplyForOrganizer(this.formData).then(res => {
					console.log(res);
					this.buttonLoading = false
					this.$tab.navigateTo(`/pages/work/membershiptransfer`);
				}).catch(err => {
					console.log(err);
					this.buttonLoading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.button-bottom {
		width: 100%;
		position: absolute;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.formback {
		position: relative;
		width: 100%;
		height: 100vh;
		padding-top: 1rpx;
	}

	.formback::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
		background-color: #bd1a2d;
		z-index: -1;
	}

	.background-f {
		margin: 32rpx !important;
		border-radius: 20rpx;
	}

	.settlement-2 {
		position: relative;
		background-image: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 245, 248, 1) 100%);
		border: 1px solid rgba(189, 26, 45, 1);

		.settlement-2-img {
			background-image: url('../../static/images/ruzhubeijing.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 460rpx;
			height: 70rpx;
			position: absolute;
			top: -20rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 2;
			color: #fff;
			text-align: center;
			font-size: 32rpx;
			line-height: 75rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.uni-forms-item {
			display: flex;
			align-items: center;
			margin: 0;
			margin-bottom: 16rpx;
			padding: 32rpx;

			.form-item-content {
				display: flex;
				align-items: center;
				width: 100%;
			}

			.form-item-contents {
				width: 100%;
				margin: 0;
				padding: 10rpx 0;
			}

			.form-item-label {
				font-size: 14px;
				color: rgba(51, 51, 51, 1);
				width: 300rpx;
			}

			.form-item-labels {
				font-size: 14px;
				text-align: left;
				color: rgba(51, 51, 51, 1);
				width: 560rpx;
			}

			.form-item-inputs {
				margin-top: 15rpx;
				border: none;
				background: none;
				font-weight: 700;
				box-shadow: none;
				border-radius: 4rpx;
				font-size: 14px;
				text-align: center;
			}

			.form-item-input {
				text-align: right;
				flex: 1;
				margin-left: 16rpx;
				border: none;
				background: none;
				box-shadow: none;
				border-radius: 4rpx;
				font-size: 14px;
			}
		}

		::v-deep .uni-forms-item__label {
			display: none; // Hide default label if using custom labels
		}
	}
</style>